<template>
  <div class="new-overview">
    <el-tooltip class="item" effect="dark" :content="$t('newSearchResult.clear')" placement="left">
      <div class="reset" @click="clearAll">
        <i class="iconfont icon-saoba"></i>
      </div>
    </el-tooltip>
    <div class="customer">
      <el-row class="num-charts" :gutter="20" id="OverrallSummary">
        <el-col :span="12">
          <div class="customer-all">
            <div class="customer-all-title">{{$t('overview.CommericalCustomer')}}</div>
            <div class="customer-time">({{$t('overview.CustomerTime')}})</div>
            <div class="customer-num">
              {{customerNum }}K
            </div>
            <!--<div class="customer-all-repository  customer-all-num">-->
            <!---->
            <!--</div>-->
            <div class="customer-all-repository clearfix">
              <!--<div v-for="(item, index) in commericalCustomer.AccumulatedNumber">-->
                <!--<span class="year">{{index}} :</span> <span class="number">{{(item / 1000).toFixed(2)}}K</span>-->
              <!--</div>-->
              <div class="numbers">
                <span class="year">PCSD :</span>
                <span class="number">{{(commericalCustomer.AccumulatedNumber.PCSD / 1000).toFixed(2)}}K</span>
              </div>
              <div class="numbers">
                <span class="year">DCG :</span>
                <span class="number">{{(commericalCustomer.AccumulatedNumber.DCG / 1000).toFixed(2)}}K</span>
              </div>
            </div>
            <div class="shareNumber">
              <span class="year">PCSD & DCG {{$t('select.Share')}}:{{(commericalCustomer.AccumulatedNumber['DCG & PCSD'] / 1000).toFixed(2)}} K</span>
            </div>
          </div>
        </el-col>
        <el-col :span="12">
          <div class="cell" v-loading="loading.customer1">
            <div class="trend-chart-title">{{$t('overview.DealtCommercialCustomerNumber')}}</div>
            <div class="trend-chart"></div>
          </div>
        </el-col>
      </el-row>
      <el-row class="map-charts" id="GeographicalDimensionRanking">
        <el-col :span="7">
          <div class="cell" v-loading="loading.geo">
            <div class="map-chart-title">Geo</div>
            <div class="geo-chart"></div>
          </div>
        </el-col>
        <el-col :span="10">
          <div class="cell" v-loading="loading.region">
            <div class="map-chart-title">Region</div>
            <div class="hide">
              <div class="region-chart"></div>
            </div>
          </div>
        </el-col>
        <el-col :span="7">
          <div class="cell" v-loading="loading.country">
            <div class="map-chart-title">{{$t('overview.Country')}}</div>
            <div class="country-chart">
              <div v-if="!mapCustomer.isShow" v-html="errorText"></div>
              <div class="country-item" v-for="(item, index) in mapCustomer.country"
                   @click="countryChartClick(item, index)">
                <div class="country-item-index">
                <span
                  :class="{country_first_index: (index + (countryPageNum - 1) * 7 + 1) == 1, country_second_index: (index + (countryPageNum - 1) * 7 + 1) == 2,country_third_index: (index + (countryPageNum - 1) * 7 + 1) == 3}">{{index + (countryPageNum - 1) * 7 + 1}}</span>
                </div>
                <div class="country-item-img">
                  <img :src="`${LOGIN_IMG_URL}/${item.url}`" alt="">
                </div>
                <div class="country-item-value">
                  <div class="country-item-name">{{item.name | filterCountry}}</div>
                  <div class="country-item-num">{{comdify(item.value)}}</div>
                </div>
              </div>
              <div class="country-item" v-if="mapCustomer.others.url" v-show="mapCustomer.isShow"
                   @click="countryChartClickOther()">
                <div class="country-item-index">
                  <span style="background: #fff">{{(countryPageNum) * 8}}</span>
                </div>
                <div class="country-item-img">
                  <img :src="`${LOGIN_IMG_URL}/${mapCustomer.others.url}`" alt="">
                </div>
                <div class="country-item-value">
                  <div class="country-item-name">More</div>
                  <div class="country-item-num">{{comdify(parseInt(mapCustomer.others.value))}}</div>
                </div>
              </div>
            </div>
          </div>
        </el-col>
      </el-row>
      <el-row class="detailed-charts" :gutter="20" id="SharingDistributions">
        <!--<el-col :span="6">-->
          <!--<div class="cell" v-loading="loading.bg">-->
            <!--<div class="detailed-chart-title">{{$t('overview.DistributionbyBG')}}</div>-->
            <!--<div class="bg-chart"></div>-->
          <!--</div>-->
        <!--</el-col>-->
        <el-col :span="6" v-loading="loading.loyalty">
          <div class="cell">
            <div class="detailed-chart-title">{{$t('overview.DistributionbyLoyalty')}}</div>
            <div class="loyalty-chart"></div>
          </div>
        </el-col>
        <el-col :span="6">
          <div class="cell" v-loading="loading.industry">
            <div class="detailed-chart-title">{{$t('overview.DistributionbyIndustry')}}</div>
            <div class="industry-chart"></div>
          </div>
        </el-col>
        <el-col :span="6">
          <div class="cell" v-loading="loading.segment">
            <div class="detailed-chart-title">{{$t('overview.DistributionbySegment')}}</div>
            <div class="segment-chart"></div>
          </div>
        </el-col>
      </el-row>
    </div>
    <div class="bp">
      <el-row class="num-charts" :gutter="20">
        <el-col :span="12">
          <div class="customer-all bp-all">
            <div class="customer-all-title">{{$t('overview.ChannelPartner')}}</div>
            <div class="customer-time">({{$t('overview.CustomerTime')}})</div>
            <div class="customer-num">
              {{bpNum}}K
            </div>
            <!--  <div class="customer-all-repository customer-all-num">
             </div> -->

            <div class="customer-all-repository clearfix">
              <!-- {{$t('overview.DealtChannelPartnerNumber1')}}<br> -->
              <!--<div class="accumulated-number-title">{{$t('overview.AccumulatedNumber')}}</div>-->
              <!--<div v-for="(item, index) in bpCustomer.AccumulatedNumber">-->
                <!--<span class="year">{{index}}:</span>  <span class="number">{{(item / 1000).toFixed(2)}}K</span>-->
              <!--</div>-->
              <div class="numbers">
                <span class="year">PCSD :</span>
                <span class="number">{{(bpCustomer.AccumulatedNumber.PCSD / 1000).toFixed(2)}}K</span>
              </div>
              <div class="numbers">
                <span class="year">DCG :</span>
                <span class="number">{{(bpCustomer.AccumulatedNumber.DCG / 1000).toFixed(2)}}K</span>
              </div>
            </div>
            <div class="shareNumber">
              <span class="year">PCSD & DCG {{$t('select.Share')}}:{{(bpCustomer.AccumulatedNumber['DCG & PCSD'] / 1000).toFixed(2)}} K</span>
            </div>
              <!--<span>{{(bpCustomer.transCustomer / 1000).toFixed(2)}}K</span>-->
              <!--  <div>{{$t('overview.RepositoryBp')}} <span>{{(bpCustomer.totalCustomer / 1000).toFixed(2)}}K</span></div> -->
              <!-- <div>{{$t('overview.OfRepositoryBpFront')}}
                {{$t('overview.OfRepositoryBp')}}<span>{{bpCustomer.transPercent}}</span>
              </div> -->
              <!-- <div><span>{{bpCustomer.noTransPercent}}</span> {{$t('overview.ToBeDeveloped')}}</div> -->
          </div>
        </el-col>
        <el-col :span="12">
          <div class="cell" v-loading="loading.bpCustomer">
            <div class="trend-chart-title">{{$t('overview.DealtChannelPartnerNumber')}}</div>
            <div class="trend-chart"></div>
          </div>
        </el-col>
      </el-row>
      <el-row class="map-charts">
        <el-col :span="7">
          <div class="cell" v-loading="loading.bpGeo">
            <div class="map-chart-title">Geo</div>
            <div class="geo-chart"></div>
          </div>
        </el-col>
        <el-col :span="10">
          <div class="cell" v-loading="loading.bpRegion">
            <div class="map-chart-title">Region</div>
            <div class="hide">
              <div class="region-chart"></div>
            </div>
          </div>
        </el-col>
        <el-col :span="7">
          <div class="cell" v-loading="loading.bpCountry">
            <div class="map-chart-title">{{$t('overview.Country')}}</div>
            <div class="country-chart">
              <div v-if="!mapCustomer.isShow" v-html="errorText"></div>
              <div class="country-item" v-for="(item, index) in mapBp.country" @click="countryChartsBpClick(item)">
                <div class="country-item-index">
                <span
                  :class="{country_first_index: (index + (countryPageNumBp - 1) * 7 + 1) == 1, country_second_index: (index + (countryPageNumBp - 1) * 7 + 1) == 2,      country_third_index: (index + (countryPageNumBp - 1) * 7 + 1) == 3}">{{index + (countryPageNumBp - 1) * 7 + 1}}</span>
                </div>
                <div class="country-item-img">
                  <img :src="`${LOGIN_IMG_URL}/${item.url}`" alt="">
                </div>
                <div class="country-item-value">
                  <div class="country-item-name">{{item.name | filterCountry}}</div>
                  <div class="country-item-num">{{comdify(item.value)}}</div>
                </div>
              </div>
              <div class="country-item" v-show="mapBp.isShow" @click="countryChartsBpClickOther()">
                <div class="country-item-index">
                  <span style="background: #fff">{{countryPageNumBp * 8}}</span>
                </div>
                <div class="country-item-img">
                  <img :src="`${LOGIN_IMG_URL}/${mapBp.others.url}`" alt="">
                </div>
                <div class="country-item-value" v-show="mapBp.isShow">
                  <div class="country-item-name">More</div>
                  <div class="country-item-num">{{comdify(parseInt(mapBp.others.value))}}</div>
                </div>
              </div>
            </div>
          </div>
        </el-col>
      </el-row>
      <el-row class="detailed-charts" :gutter="20">
        <!--<el-col :span="6">-->
          <!--<div class="cell" v-loading="loading.bpBg">-->
            <!--<div class="detailed-chart-title">{{$t('overview.DistributionbyBG')}}</div>-->
            <!--<div class="bg-chart"></div>-->
          <!--</div>-->
        <!--</el-col>-->
        <el-col :span="6">
          <div class="cell" v-loading="loading.bpLoyalty">
            <div class="detailed-chart-title">{{$t('overview.DistributionbyLoyalty')}}</div>
            <div class="loyalty-chart"></div>
          </div>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
  import {mapGetters} from 'vuex'
  import {sortObj, reverseObj} from '../../utils/auth'
  import {getUsername} from '../../utils/auth'

  export default {
    name: "new-overview",

    data() {
      return {
        customerNum: 0.00,
        bpNum: 0.00,
        countryPageNum: 1,
        countryPageNumBp: 1,
        LOGIN_IMG_URL: process.env.COUNTRY_IMG_URL,
        errorText: '<div style="text-align:center;line-height: 30vh;font-size: 12px;">NO DATA</div>',
        test: getUsername(),
        commericalCustomer: {
          AccumulatedNumber: {
            'PCSD': 0.00,
            'DCG': 0.00,
            'DCG & PCSD': 0.00
          },
          transCustomer: '',
          transPercent: '',
          totalCustomer: '',
          noTransPercent: ''
        },
        bpCustomer: {
          AccumulatedNumber: {
            'PCSD': 0.00,
            'DCG': 0.00,
            'DCG & PCSD': 0.00
          },
          transCustomer: '',
          transPercent: '',
          totalCustomer: '',
          noTransPercent: '',
        },
        mapCustomer: {
          country: '',
          others: {
            url: ''
          },
          isShow: true
        },
        mapBp: {
          country: '',
          others: '',
          isShow: true
        },
        pieChartColor: ['#0090e9', '#b6a2df', '#2fc7c9', '#69e3f2', '#9f37c1', '#d73ffd', '#f08351', '#c24039', '#83eb78', '#2bd22f', '#ffc801', '#ffe403', '#ec5fa8', '#c2398d'],
        customerDomCharts: {
          trendChart: '',
          geoChart: '',
          regionChart: '',
          countryChart: '',
          bgChart: '',
          loyaltyChart: '',
          industryChart: '',
          segmentChart: ''
        },
        bpDomCharts: {
          trendChart: '',
          geoChart: '',
          regionChart: '',
          countryChart: '',
          bgChart: '',
          loyaltyChart: ''
        },
        errorInfo: {
          color: '#fff',
          text: 'NO DATA',
          textColor: "#000",
          maskColor: '#fff'
        },
        postParams: {
          geo: '',
          region: '',
          country: '',
          bg: '',
          loyalty: '',
          industry: '',
          segment: '',
        },
        postParamsBp: { // 下面的同类图表的参数
          geo: '',
          region: '',
          country: '',
          bg: '',
          loyalty: '',
          industry: '',
          segment: '',
        },
        loading: {
          customer1: true,
          geo: true,
          region: true,
          country: true,
          bg: true,
          loyalty: true,
          industry: true,
          segment: false,
          bpCustomer: true,
          bpGeo: true,
          bpRegion: true,
          bpCountry: true,
          bpBg: true,
          bpLoyalty: true
        }
      }
    },
    computed: {
      ...mapGetters([
        'sidebar'
      ])
    },
    methods: {
      initEchartsDom() {
        this.customerDomCharts.trendChart = this.echarts.init(document.getElementsByClassName('trend-chart')[0], null, {renderer: 'canvas'})
        this.customerDomCharts.geoChart = this.echarts.init(document.getElementsByClassName('geo-chart')[0], null, {renderer: 'canvas'})
        this.customerDomCharts.regionChart = this.echarts.init(document.getElementsByClassName('region-chart')[0], null, {renderer: 'canvas'})
        // this.customerDomCharts.bgChart = this.echarts.init(document.getElementsByClassName('bg-chart')[0], null, {renderer: 'canvas'})
        this.customerDomCharts.loyaltyChart = this.echarts.init(document.getElementsByClassName('loyalty-chart')[0], null, {renderer: 'canvas'})
        this.customerDomCharts.industryChart = this.echarts.init(document.getElementsByClassName('industry-chart')[0], null, {renderer: 'canvas'})
        this.customerDomCharts.segmentChart = this.echarts.init(document.getElementsByClassName('segment-chart')[0], null, {renderer: 'canvas'})
        this.bpDomCharts.trendChart = this.echarts.init(document.getElementsByClassName('trend-chart')[1], null, {renderer: 'canvas'})
        this.bpDomCharts.geoChart = this.echarts.init(document.getElementsByClassName('geo-chart')[1], null, {renderer: 'canvas'})
        this.bpDomCharts.regionChart = this.echarts.init(document.getElementsByClassName('region-chart')[1], null, {renderer: 'canvas'})
        // this.bpDomCharts.bgChart = this.echarts.init(document.getElementsByClassName('bg-chart')[1], null, {renderer: 'canvas'})
        this.bpDomCharts.loyaltyChart = this.echarts.init(document.getElementsByClassName('loyalty-chart')[1], null, {renderer: 'canvas'})
      },
      initCountryPageNum() {
        this.countryPageNum = 1
        this.countryPageNumBp = 1
      },
      clearAll() {
        this.initCountryPageNum()
        this.postParams = {
          geo: '',
          region: '',
          country: '',
          bg: '',
          loyalty: '',
          industry: '',
          segment: '',
        }
        this.postParamsBp = { // 下面的同类图表的参数
          geo: '',
          region: '',
          country: '',
          bg: '',
          loyalty: '',
          industry: '',
          segment: '',
        }
        this.loadCustomerCharts()
        this.loadBpCharts()
        this.initLoading()
        this.initBpLoading()
      },
      // async initCommericalCustomer(params = {}) {
      //   try {
      //     let res = await this.axios.post('/overview/commericalCustomer.do', params)
      //     let data = res.data.data[0]
      //     this.commericalCustomer.transCustomer = data.transCustomer
      //     this.commericalCustomer.transPercent = data.transPercent
      //     this.commericalCustomer.totalCustomer = data.totalCustomer
      //     this.commericalCustomer.noTransPercent = data.noTransPercent
      //   } catch (err) {
      //     console.log(err)
      //     this.commericalCustomer.transCustomer = 0
      //     this.commericalCustomer.transPercent = 0
      //     this.commericalCustomer.totalCustomer = 0
      //     this.commericalCustomer.noTransPercent = 0
      //   }
      // },
      async initCommericalCustomer(params = {}) {
        try {
          let res = await this.axios.post('/overview/bgByCustomer.do', params)
          let data = res.data.data
          this.commericalCustomer.AccumulatedNumber['PCSD'] = data['PCSD']
          this.commericalCustomer.AccumulatedNumber['DCG'] = data['DCG']
          this.commericalCustomer.AccumulatedNumber['DCG & PCSD'] = data['DCG & PCSD']
          // this.commericalCustomer.AccumulatedNumber = sortObj(data)
        } catch (err) {
          console.log(err)
          // this.commericalCustomer.transCustomer = 0
          // this.commericalCustomer.transPercent = 0
          // this.commericalCustomer.totalCustomer = 0
          // this.commericalCustomer.noTransPercent = 0
        }
      },
      async initCustomerFisYear(params = {}) {
        try {
          // let res = await this.axios.post('/overview/customerNumByYearFis.do', params)
          let res = await this.axios.post('/overview/commericalCustomer.do', params)
          let data = res.data.data
          // console.log('customerNum',data)
          this.customerNum = (data[0]['totalCustomer']/ 1000).toFixed(2)
        } catch (err) {
          console.log(err)
        }
      },
      async initBpFisYear(params = {}) {
        try {
          let res = await this.axios.post('/overview/commericalBp.do', params)
          let data = res.data.data
          // console.log('bpNum',data)
          this.bpNum = (data[0]['totalCustomer']/ 1000).toFixed(2)
        } catch (err) {
          console.log(err)
        }
      },
      async initTrendChart(params = {}) {
        const _this = this
        try {
          let res = await this.axios.post('/overview/trendCustomer.do', params)
          let data = res.data.data.sort(function (a, b) {
            return parseInt(a.cal_year) - parseInt(b.cal_year)
          })
          let name = []
          let value = []
          for (let i in data) {
            name.push(`FY${data[i].cal_year}`)
            value.push(data[i].accountNum)
          }
          let option = {
            grid: {
              top: 20,
              left: 80,
              bottom: 40
            },
            tooltip: {
                confine: true,
              trigger: 'axis',
              axisPointer: {
                lineStyle: {
                  color: '#f5f5f9'
                }
              },
              backgroundColor: 'rgba(255,255,255,1)',
              padding: [5, 10],
              textStyle: {
                color: '#7588E4',
              }
              // extraCssText: 'box-shadow: 0 3px 12px rgba(224,226,233,1)'
            },
            xAxis: {
              type: 'category',
              boundaryGap: false,
              axisLine: {
                lineStyle: {
                  color: '#f5f5f9'
                }
              },
              axisTick: {
                show: false
              },
              axisLabel: {
                color: '#959eaf'
              },
              data: name
            },
            yAxis: {
              axisLine: {
                lineStyle: {
                  color: '#f5f5f9'
                }
              },
              axisTick: {
                show: false
              },
              axisLabel: {
                color: '#959eaf'
              },
              splitLine: {
                lineStyle: {
                  color: ['#f5f5f9']
                }
              },
              type: 'value'
            },
            series: [{
              itemStyle: {
                normal: {
                  color: {
                    type: 'linear',
                    x: 0,
                    y: 0,
                    x2: 0,
                    y2: 1,
                    colorStops: [{
                      offset: 0, color: '#0090e9' // 0% 处的颜色
                    }, {
                      offset: 1, color: '#0090e9' // 100% 处的颜色
                    }],
                    globalCoord: false // 缺省为 false
                  },
                  // opacity: 0
                }
              },
              lineStyle: {
                normal: {
                  width: 4,
                  // shadowColor: 'rgba(116, 35, 244, 0.5)',
                  // shadowBlur: 12,
                  // shadowOffsetX: 0,
                  // shadowOffsetY: 5,
                }
              },
              data: value,
              type: 'line',
              smooth: true,
              smoothMonotone: 'none'
            }]
          }
          this.customerDomCharts.trendChart.setOption(option)
        } catch (err) {
          console.log(err)
          this.customerDomCharts.trendChart.showLoading('default', _this.errorInfo)
        }
        this.loading.customer1 = false
      },
      async initGeoChart(params = {}) {
        const _this = this
        try {
          let res = await this.axios.post('/overview/geoCustomer.do', params)
          let data = res.data.data.sort(function (a, b) {
            return a.value - b.value
          })
          let name = []
          let value = []
          for (let i in data) {
            name.push(data[i].name)
            value.push(data[i].value)
          }
          let option = {
            grid: {
              top: 20,
              left: 60,
              right: 30,
              bottom: 65
              // bottom: 40
            },
            tooltip: {
                confine: true,
              trigger: 'axis',
              axisPointer: {
                type: 'shadow'
              },
              backgroundColor: 'rgba(255,255,255,1)',
              padding: [5, 10],
              textStyle: {
                color: '#7588E4'
              },
              extraCssText: 'box-shadow: 0 3px 12px rgba(224,226,233,1)'
            },
            xAxis: {
              type: 'value',
              axisLine: {
                lineStyle: {
                  color: '#f5f5f9'
                }
              },
              axisLabel: {
                // show: false,
                color: '#959eaf',
                rotate: 45,
                fontSize: 10
              },
              axisTick: {
                // show: false
              },
              splitLine: {
                lineStyle: {
                  color: ['#f5f5f9']
                }
              }
            },
            yAxis: {
              type: 'category',
              axisLine: {
                lineStyle: {
                  color: '#f5f5f9'
                }
              },
              axisTick: {
                show: false
              },
              axisLabel: {
                align: 'left',
                margin: 40,
                color: '#959eaf'
              },
              data: name
            },
            series: [{
              data: value,
              type: 'bar',
              barMaxWidth: 14,
              itemStyle: {
                normal: {
                  color: {
                    type: 'linear',
                    x: 0,
                    y: 1,
                    x2: 1,
                    y2: 1,
                    colorStops: [{
                      offset: 0, color: '#0090e9' // 0% 处的颜色
                    }, {
                      offset: 1, color: '#0090e9' // 100% 处的颜色
                    }],
                    globalCoord: false // 缺省为 false
                  },
                  // barBorderRadius: [0, 7, 7, 0]
                }
              }
            }]
          }
          this.customerDomCharts.geoChart.setOption(option)
        } catch (err) {
          console.log(err)
          this.customerDomCharts.geoChart.showLoading('default', _this.errorInfo)
        }
        this.loading.geo = false
      },
      async initRegionChart(params = {}) {
        const _this = this
        try {
          let res = await this.axios.post('/overview/regionCustomer.do', params)
          let data = res.data.data.sort(function (a, b) {
            return b.value - a.value
          })
          let name = []
          let value = []
          for (let i in data) {
            name.push(data[i].name)
            value.push(data[i].value)
          }
          let option = {
            grid: {
              top: 20,
              left: 60,
              // left: 42,
              right: 10,
              bottom: 65
            },
            tooltip: {
                confine: true,
              trigger: 'axis',
              axisPointer: {
                type: 'shadow'
              },
              backgroundColor: 'rgba(255,255,255,1)',
              padding: [5, 10],
              textStyle: {
                color: '#7588E4'
              },
              extraCssText: 'box-shadow: 0 3px 12px rgba(224,226,233,1)'
            },
            yAxis: {
              type: 'value',
              axisLine: {
                lineStyle: {
                  color: '#f5f5f9'
                }
              },
              axisLabel: {
                // show: false,
                color: '#959eaf'
              },
              axisTick: {
                // show: false
              },
              splitLine: {
                lineStyle: {
                  color: ['#f5f5f9']
                }
              }
            },
            xAxis: {
              type: 'category',
              axisLine: {
                lineStyle: {
                  color: '#f5f5f9'
                }
              },
              axisTick: {
                // show: false,
                alignWithLabel: true
              },
              axisLabel: {
                rotate: 45,
                // align: 'left',
                // showMinLabel: true,
                color: '#959eaf',
                fontSize: 10
              },
              data: name
            },
            series: [{
              data: value,
              type: 'bar',
              barMaxWidth: 14,
              itemStyle: {
                normal: {
                  color: {
                    type: 'linear',
                    x: 1,
                    y: 1,
                    x2: 1,
                    y2: 0,
                    colorStops: [{
                      offset: 0, color: '#ffb980' // 0% 处的颜色
                    }, {
                      offset: 1, color: '#ffb980' // 100% 处的颜色
                    }],
                    globalCoord: false // 缺省为 false
                  },
                  // barBorderRadius: [7, 7, 0, 0]
                }
              }
            }]
          }
          this.customerDomCharts.regionChart.setOption(option)
        } catch (err) {
          console.log(err)
          this.customerDomCharts.regionChart.showLoading('default', _this.errorInfo)
        }
        this.loading.region = false
      },
      countryChartClick(item) { // 点击第一个country
        this.postParams.geo = ''
        this.postParams.region = ''
        const params = {
          geo: [this.postParams.geo],
          region: [this.postParams.region],
          country: [item.name],
          bg: '',
          loyalty: '',
          industry: '',
          segment: ''
        }
        if (item.name === 'other') {
          params.pageNum = this.countryPageNum
        }
        this.loadCustomerCharts(params)
      },
      countryChartClickOther() {
        this.countryPageNum++;
        const params = {
          geo: [this.postParams.geo],
          region: [this.postParams.region],
          country: '',
          bg: '',
          loyalty: '',
          industry: '',
          segment: '',
          pageNum: this.countryPageNum
        }
        this.loading.country = true
        this.initCountryChart(params)
      },
      async initCountryChart(params = {}) {
        try {
          let res = await this.axios.post('/overview/countryCustomer.do', params)
          let data = res.data.data

          this.mapCustomer.country = data.country.sort(function (a, b) {
            return b.value - a.value
          })
          data.other ? this.mapCustomer.others = data.other : this.mapCustomer.others = {
            name: '',
            value: '',
            url: ''
          }
        } catch (err) {
          console.log(err);
          this.mapCustomer.isShow = false;
        }
        this.loading.country = false
      },
      async initBgChart(params = {}, isclick = '', needColor = []) { // isClick为''显示默认的颜色，为bgChart按照点击的颜色渲染， needColor为需要渲染的颜色
        const _this = this
        try {
          let res = await this.axios.post('/overview/bgByCustomer.do', params)
          let data = res.data.data
          let bgbyloyaltyData = []
          let bgrbyloyaltyLegend = []
          let k = 0
          let colorStop = [] // 图表渲染的颜色
          for (const i in sortObj(data)) {
            if (isclick === 'bg') {
              colorStop = [
                {offset: 0, color: needColor[0].color},
                {offset: 1, color: needColor[1].color}
              ]
            } else {
              colorStop = [
                {offset: 0, color: _this.pieChartColor[k]},
                {offset: 1, color: _this.pieChartColor[k]}
              ]
            }
            bgbyloyaltyData.push({
              value: data[i],
              name: i,
              itemStyle: {
                normal: {
                  color: {
                    type: 'linear',
                    x: 0,
                    y: 0,
                    x2: 0,
                    y2: 1,
                    // colorStops: [
                    //   {offset: 0, color: _this.pieChartColor[k]},
                    //   {offset: 1, color: _this.pieChartColor[k + 1]}
                    // ],
                    colorStops: colorStop,
                    globalCoord: false // 缺省为 false
                  },
                  // barBorderRadius: [0, 50, 50, 0] //（顺时针左上，右上，右下，左下）
                },
                emphasis: {
                  shadowBlur: 10,
                  shadowOffsetX: 0,
                  shadowColor: 'rgba(0, 0, 0, 0.5)'
                }
              }
            })
            k += 2
            if (k > _this.pieChartColor.length) {
              k = 0
            }
            bgrbyloyaltyLegend.push(i)
          }
          // let option = {
          //   tooltip: {
          //       confine: true,
          //     trigger: 'item',
          //     axisPointer: {
          //       lineStyle: {
          //         color: '#f5f5f9'
          //       }
          //     },
          //     position: function (pos, params, dom, rect, size) {
          //       // 鼠标在左侧时 tooltip 显示到右侧，鼠标在右侧时 tooltip 显示到左侧。
          //       var obj = {top: 60};
          //       obj[['left', 'right'][+(pos[0] < size.viewSize[0] / 2)]] = 5;
          //       return obj;
          //     },
          //     backgroundColor: 'rgba(255,255,255,1)',
          //     padding: [5, 10],
          //     textStyle: {
          //       color: '#7588E4',
          //     },
          //     extraCssText: 'box-shadow: 0 3px 12px rgba(224,226,233,1)'
          //   },
          //   legend: {
          //     orient: 'horizontal',
          //     bottom: 10,
          //     itemWidth: 10,
          //     itemGap: 5,
          //     textStyle: {
          //       padding: [0, 0, 0, 0],
          //       fontSize: 10
          //     },
          //     icon: 'circle',
          //     data: bgrbyloyaltyLegend
          //   },
          //   series: [
          //     {
          //       type: 'bar',
          //       radius: ['30%', '60%'],
          //       center: ['50%', '40%'],
          //       avoidLabelOverlap: false,
          //       label: {
          //         normal: {
          //           show: false,
          //           position: 'center'
          //         },
          //         emphasis: {
          //           show: true,
          //           textStyle: {
          //             fontSize: '10',
          //             fontWeight: 'bold'
          //           }
          //         }
          //       },
          //       labelLine: {
          //         normal: {
          //           show: false
          //         }
          //       },
          //       data: bgbyloyaltyData
          //     }
          //   ]
          // }
          let option = {
            grid: {
              top: 20,
              left: 60,
              bottom: 80
            },
            tooltip: {
                confine: true,
              trigger: 'axis',
              axisPointer: {
                type: 'shadow'
              },
              backgroundColor: 'rgba(255,255,255,1)',
              padding: [5, 10],
              textStyle: {
                color: '#7588E4'
              },
              extraCssText: 'box-shadow: 0 3px 12px rgba(224,226,233,1)'
            },
            xAxis: {
              type: 'category',
              axisLine: {
                lineStyle: {
                  color: '#f5f5f9'
                }
              },
              axisTick: {
                show: false
              },
              axisLabel: {
                rotate: 45,
                fontSize: 10,
                color: '#14142d'
              },
              data: bgrbyloyaltyLegend
            },
            yAxis: {
              type: 'value',
              axisLine: {
                lineStyle: {
                  color: '#f5f5f9'
                }
              },
              axisLabel: {
                fontSize: 10,
                color: '#959eaf'
              },
              axisTick: {
                show: false
              },
              splitLine: {
                lineStyle: {
                  color: ['#f5f5f9']
                }
              }
            },
            series: [{
              data: bgbyloyaltyData,
              type: 'bar',
              barMaxWidth: 10,
              itemStyle: {
                normal: {
                  color: {
                    type: 'linear',
                    x: 1,
                    y: 1,
                    x2: 1,
                    y2: 0,
                    colorStops: [{
                      offset: 0, color: '#0090e9' // 0% 处的颜色
                    }, {
                      offset: 1, color: '#0090e9' // 100% 处的颜色
                    }],
                    globalCoord: false // 缺省为 false
                  },
                  // barBorderRadius: [7, 7, 0, 0]
                }
              }
            }]
          }
          this.customerDomCharts.bgChart.setOption(option)
        } catch (err) {
          console.log(err);
          this.customerDomCharts.bgChart.showLoading('default', _this.errorInfo)
        }
        this.loading.bg = false
      },
      async initLoyaltyChart(params = {}, isclick = '', needColor = []) {
        let pieChartColor = ['#506a91','#59c3e6', '#edaeda', '#93b8e3', '#a4e6ef']
        const _this = this
        try {
          let res = await this.axios.post('/overview/loyaltyByCustomer.do', params)
          let data = res.data.data
          let customerbyloyaltyData = []
          let customerbyloyaltyLegend = []
          var k = 0
          let colorStop = []
          for (const i in sortObj(data)) {
            if (isclick === 'loyalty') {
              colorStop = [
                {offset: 0, color: needColor[0].color},
                {offset: 1, color: needColor[1].color}
              ]
            } else {
              colorStop = [
                {offset: 0, color: pieChartColor[k]},
                {offset: 1, color: pieChartColor[k]}
              ]
            }
            if(i.toLowerCase() != 'lost') {
              customerbyloyaltyData.push({
                value: data[i],
                name: i,
                itemStyle: {
                  normal: {
                    color: {
                      type: 'linear',
                      x: 0,
                      y: 0,
                      x2: 0,
                      y2: 1,
                      // colorStops: [
                      //   {offset: 0, color: _this.pieChartColor[k]},
                      //   {offset: 1, color: _this.pieChartColor[k + 1]}
                      // ],
                      colorStops: colorStop,
                      globalCoord: false // 缺省为 false
                    },
                    barBorderRadius: [0, 50, 50, 0] //（顺时针左上，右上，右下，左下）
                  },
                  emphasis: {
                    shadowBlur: 10,
                    shadowOffsetX: 0,
                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                  }
                }
              })
              k += 1
              if (k > 4) {
                k = 0
              }
              customerbyloyaltyLegend.push(i)
            }
          }
          let option = {
            tooltip: {
                confine: true,
              trigger: 'item',
              axisPointer: {
                lineStyle: {
                  color: '#f5f5f9'
                }
              },
              backgroundColor: 'rgba(255,255,255,1)',
              padding: [5, 10],
              textStyle: {
                color: '#7588E4',
              },
              extraCssText: 'box-shadow: 0 3px 12px rgba(224,226,233,1)'
            },
            legend: {
              orient: 'horizontal',
              bottom: 10,
              itemWidth: 10,
              itemGap: 5,
              textStyle: {
                fontSize: 10
              },
              icon: 'circle',
              data: customerbyloyaltyLegend
            },
            series: [
              {
                type: 'pie',
                radius: ['30%', '60%'],
                center: ['50%', '40%'],
                avoidLabelOverlap: false,
                label: {
                  normal: {
                    show: false,
                    position: 'center'
                  },
                  emphasis: {
                    show: true,
                    textStyle: {
                      fontSize: '10',
                      fontWeight: 'bold'
                    }
                  }
                },
                labelLine: {
                  normal: {
                    show: false
                  }
                },
                data: customerbyloyaltyData
              }
            ]
          }
          this.customerDomCharts.loyaltyChart.setOption(option)
        } catch (err) {
          console.log(err);
          this.customerDomCharts.loyaltyChart.showLoading('default', _this.errorInfo)
        }
        this.loading.loyalty = false
      },
      async initIndustryChart(params = {}) {
        const _this = this
        try {
          let res = await this.axios.post('/overview/industryByCustomer.do', params)
          let data = res.data.data
          let customerbyIndustrData = []
          let customerbyloyaltyName = []
          for (const i in sortObj(data)) {
            customerbyIndustrData.push({
              value: data[i],
              name: i
            })
            customerbyloyaltyName.push(i)
          }
          let option = {
            grid: {
              top: 20,
              left: 60,
              bottom: 80
            },
            tooltip: {
                confine: true,
              trigger: 'axis',
              axisPointer: {
                type: 'shadow'
              },
              backgroundColor: 'rgba(255,255,255,1)',
              padding: [5, 10],
              textStyle: {
                color: '#7588E4'
              },
              extraCssText: 'box-shadow: 0 3px 12px rgba(224,226,233,1)'
            },
            xAxis: {
              type: 'category',
              axisLine: {
                lineStyle: {
                  color: '#f5f5f9'
                }
              },
              axisTick: {
                show: false
              },
              axisLabel: {
                rotate: 45,
                fontSize: 10,
                color: '#14142d'
              },
              data: customerbyloyaltyName
            },
            yAxis: {
              type: 'value',
              axisLine: {
                lineStyle: {
                  color: '#f5f5f9'
                }
              },
              axisLabel: {
                fontSize: 10,
                color: '#959eaf'
              },
              axisTick: {
                show: false
              },
              splitLine: {
                lineStyle: {
                  color: ['#f5f5f9']
                }
              }
            },
            series: [{
              data: customerbyIndustrData,
              type: 'bar',
              barMaxWidth: 10,
              itemStyle: {
                normal: {
                  color: {
                    type: 'linear',
                    x: 1,
                    y: 1,
                    x2: 1,
                    y2: 0,
                    colorStops: [{
                      offset: 0, color: '#0090e9' // 0% 处的颜色
                    }, {
                      offset: 1, color: '#0090e9' // 100% 处的颜色
                    }],
                    globalCoord: false // 缺省为 false
                  },
                  // barBorderRadius: [7, 7, 0, 0]
                }
              }
            }]
          }
          this.customerDomCharts.industryChart.setOption(option)
        } catch (err) {
          this.customerDomCharts.industryChart.showLoading('default', _this.errorInfo)
        }
        this.loading.industry = false
      },
      async initSegmentChart(params = {}, isclick = '', needColor = []) {
        let pieChartColor = ['#8e97b3', '#e4d114', '#148de9', '#3ac8c8','#b59fde', '#fdb980', '#d67781']
        const _this = this
        try {
          let res = await this.axios.post('/overview/segmentByCustomer.do', params)
          let data = res.data.data
          let customerbysegmentData = []
          let customerbysegmentLegend = []
          let k = 0
          let colorStop = []
          for (const i in sortObj(data)) {
            if (isclick === 'segment') {
              colorStop = [
                {offset: 0, color: needColor[0].color},
                {offset: 1, color: needColor[1].color}
              ]
            } else {
              colorStop = [
                {offset: 0, color: pieChartColor[k]},
                {offset: 1, color: pieChartColor[k]}
              ]
            }
            customerbysegmentData.push({
              value: data[i],
              name: i,
              itemStyle: {
                normal: {
                  color: {
                    type: 'linear',
                    x: 0,
                    y: 0,
                    x2: 0,
                    y2: 1,
                    // colorStops: [
                    //   {offset: 0, color: _this.pieChartColor[k]},
                    //   {offset: 1, color: _this.pieChartColor[k + 1]}
                    // ],
                    colorStops: colorStop,
                    globalCoord: false // 缺省为 false
                  },
                  barBorderRadius: [0, 50, 50, 0] //（顺时针左上，右上，右下，左下）
                },
                emphasis: {
                  shadowBlur: 10,
                  shadowOffsetX: 0,
                  shadowColor: 'rgba(0, 0, 0, 0.5)'
                }
              }
            })
            k += 1
            if (k > _this.pieChartColor.length) {
              k = 0
            }
            customerbysegmentLegend.push(i)
          }
          let option = {
            tooltip: {
                confine: true,
              trigger: 'item',
              axisPointer: {
                lineStyle: {
                  color: '#f5f5f9'
                }
              },
              backgroundColor: 'rgba(255,255,255,1)',
              padding: [5, 10],
              textStyle: {
                color: '#7588E4',
              },
              extraCssText: 'box-shadow: 0 3px 12px rgba(224,226,233,1)'
            },
            legend: {
              orient: 'horizontal',
              bottom: 10,
              itemWidth: 10,
              itemGap: 5,
              textStyle: {
                padding: [0, 0, 0, 0],
                fontSize: 10
              },
              icon: 'circle',
              data: customerbysegmentLegend
            },
            series: [
              {
                type: 'pie',
                radius: ['30%', '60%'],
                center: ['50%', '40%'],
                avoidLabelOverlap: false,
                label: {
                  normal: {
                    show: false,
                    position: 'center'
                  },
                  emphasis: {
                    show: true,
                    textStyle: {
                      fontSize: '10',
                      fontWeight: 'bold'
                    }
                  }
                },
                labelLine: {
                  normal: {
                    show: false
                  }
                },
                data: customerbysegmentData
              }
            ]
          }
          this.customerDomCharts.segmentChart.setOption(option)
        } catch (err) {
          console.log(err);
          this.customerDomCharts.segmentChart.showLoading('default', _this.errorInfo)
        }
        this.loading.segment = false
      },
      async initCommericalBp(params = {}) {
        const _this = this
        try {
          let res = await this.axios.post('/overview/bgByBp.do', params)
          let data = res.data.data
          // this.bpCustomer.AccumulatedNumber = sortObj(data)
          this.bpCustomer.AccumulatedNumber['PCSD'] = data['PCSD']
          this.bpCustomer.AccumulatedNumber['DCG'] = data['DCG']
          this.bpCustomer.AccumulatedNumber['DCG & PCSD'] = data['DCG & PCSD']
        } catch (err) {
          console.log(err)
        }
      },
      async initTrendChartBp(params = {}) {
        const _this = this
        try {
          let res = await this.axios.post('/overview/trendBp.do', params)
          let data = res.data.data.sort(function (a, b) {
            return parseInt(a.cal_year) - parseInt(b.cal_year)
          })
          let name = []
          let value = []
          for (let i in data) {
            name.push(`FY${data[i].cal_year}`)
            value.push(data[i].accountNum)
          }
          let option = {
            grid: {
              top: 20,
              left: 80,
              bottom: 40
            },
            tooltip: {
                confine: true,
              trigger: 'axis',
              axisPointer: {
                lineStyle: {
                  color: '#f5f5f9'
                }
              },
              backgroundColor: 'rgba(255,255,255,1)',
              padding: [5, 10],
              textStyle: {
                color: '#7588E4',
              },
              extraCssText: 'box-shadow: 0 3px 12px rgba(224,226,233,1)'
            },
            xAxis: {
              type: 'category',
              boundaryGap: false,
              axisLine: {
                lineStyle: {
                  color: '#f5f5f9'
                }
              },
              axisTick: {
                show: false
              },
              axisLabel: {
                color: '#959eaf'
              },
              data: name
            },
            yAxis: {
              axisLine: {
                lineStyle: {
                  color: '#f5f5f9'
                }
              },
              axisTick: {
                show: false
              },
              axisLabel: {
                color: '#959eaf'
              },
              splitLine: {
                lineStyle: {
                  color: ['#f5f5f9']
                }
              },
              type: 'value'
            },
            series: [{
              itemStyle: {
                normal: {
                  color: {
                    type: 'linear',
                    x: 0,
                    y: 0,
                    x2: 0,
                    y2: 1,
                    colorStops: [{
                      offset: 0, color: '#0090e9' // 0% 处的颜色
                    }, {
                      offset: 1, color: '#0090e9' // 100% 处的颜色
                    }],
                    globalCoord: false // 缺省为 false
                  },
                  // opacity: 0
                }
              },
              lineStyle: {
                normal: {
                  width: 4,
                  // shadowColor: 'rgba(116, 35, 244, 0.5)',
                  // shadowBlur: 12,
                  // shadowOffsetX: 0,
                  // shadowOffsetY: 5,
                }
              },
              data: value,
              type: 'line',
              smooth: true,
              smoothMonotone: 'none'
            }]
          }
          this.bpDomCharts.trendChart.setOption(option)
        } catch (err) {
          console.log(err)
          this.bpDomCharts.trendChart.showLoading('default', _this.errorInfo)
        }
        this.loading.bpCustomer = false
      },
      // 奇
      async initGeoChartBp(params = {}) {
        const _this = this
        try {
          let res = await this.axios.post('/overview/geoBp.do', params)
          let data = res.data.data.sort(function (a, b) {
            return a.value - b.value
          })
          let name = []
          let value = []
          for (let i in data) {
            name.push(data[i].name)
            value.push(data[i].value)
          }
          let option = {
            grid: {
              top: 20,
              left: 60,
              right: 30,
              bottom: 65
              // bottom: 40
            },
            xAxis: {
              type: 'value',
              axisLine: {
                lineStyle: {
                  color: '#f5f5f9'
                }
              },
              axisLabel: {
                // show: false,
                color: '#959eaf',
                rotate: 45,
                fontSize: 10
              },
              axisTick: {
                // show: false
              },
              splitLine: {
                lineStyle: {
                  color: ['#f5f5f9']
                }
              }
            },
            tooltip : {
              trigger: 'axis',
              axisPointer: {
                type: 'shadow'
              },
              position: function (pos, params, dom, rect, size) {
                // 鼠标在左侧时 tooltip 显示到右侧，鼠标在右侧时 tooltip 显示到左侧。
                var obj = {top: 60};
                obj[['left', 'right'][+(pos[0] < size.viewSize[0] / 2)]] = 5;
                return obj;
              },
              backgroundColor: 'rgba(255,255,255,1)',
              padding: [5, 10],
              textStyle: {
                color: '#7588E4'
              },
              extraCssText: 'box-shadow: 0 3px 12px rgba(224,226,233,1)'
            },
            yAxis: {
              type: 'category',
              axisLine: {
                lineStyle: {
                  color: '#f5f5f9'
                }
              },
              axisTick: {
                show: false
              },
              axisLabel: {
                align: 'left',
                margin: 40,
                color: '#959eaf'
              },
              data: name
            },
            series: [{
              data: value,
              type: 'bar',
              barMaxWidth: 14,
              itemStyle: {
                normal: {
                  color: {
                    type: 'linear',
                    x: 0,
                    y: 1,
                    x2: 1,
                    y2: 1,
                    colorStops: [{
                      offset: 0, color: '#0090e9' // 0% 处的颜色
                    }, {
                      offset: 1, color: '#0090e9' // 100% 处的颜色
                    }],
                    globalCoord: false // 缺省为 false
                  },
                  // barBorderRadius: [0, 7, 7, 0]
                }
              }
            }]
          }
          this.bpDomCharts.geoChart.setOption(option)
        } catch (err) {
          console.log(err);
          this.bpDomCharts.geoChart.showLoading('default', _this.errorInfo)
        }
        this.loading.bpGeo = false
      },
      async initRegionChartBp(params = {}) {
        const _this = this
        try {
          let res = await this.axios.post('/overview/regionBp.do', params)
          let data = res.data.data.sort(function (a, b) {
            return b.value - a.value
          })
          let name = []
          let value = []
          for (let i in data) {
            name.push(data[i].name)
            value.push(data[i].value)
          }
          let option = {
            grid: {
              top: 20,
              left: 60,
              // left: 42,
              right: 10,
              bottom: 65
            },
            yAxis: {
              type: 'value',
              axisLine: {
                lineStyle: {
                  color: '#f5f5f9'
                }
              },
              axisLabel: {
                // show: false,
                color: '#959eaf'
              },
              axisTick: {
                // show: false
              },
              splitLine: {
                lineStyle: {
                  color: ['#f5f5f9']
                }
              }
            },
            tooltip: {
                confine: true,
              trigger: 'axis',
              axisPointer: {
                type: 'shadow'
              },
              backgroundColor: 'rgba(255,255,255,1)',
              padding: [5, 10],
              textStyle: {
                color: '#7588E4'
              },
              extraCssText: 'box-shadow: 0 3px 12px rgba(224,226,233,1)'
            },
            xAxis: {
              type: 'category',
              axisLine: {
                lineStyle: {
                  color: '#f5f5f9'
                }
              },
              axisTick: {
                // show: false,
                alignWithLabel: true
              },
              axisLabel: {
                rotate: 45,
                // align: 'left',
                // showMinLabel: true,
                color: '#959eaf',
                fontSize: 10
              },
              data: name
            },
            series: [{
              data: value,
              type: 'bar',
              barMaxWidth: 14,
              itemStyle: {
                normal: {
                  color: {
                    type: 'linear',
                    x: 1,
                    y: 1,
                    x2: 1,
                    y2: 0,
                    colorStops: [{
                      offset: 0, color: '#ffb980' // 0% 处的颜色
                    }, {
                      offset: 1, color: '#ffb980' // 100% 处的颜色
                    }],
                    globalCoord: false // 缺省为 false
                  },
                  // barBorderRadius: [7, 7, 0, 0]
                }
              }
            }]
          }

          this.bpDomCharts.regionChart.setOption(option)
        } catch (err) {
          console.log(err)
          this.bpDomCharts.regionChart.showLoading('default', _this.errorInfo)
        }
        this.loading.bpRegion = false
      },
      async initCountryChartBp(params = {}) {
        try {
          let res = await this.axios.post('/overview/countryBp.do', params)
          let data = res.data.data
          this.mapBp.country = data.country.sort(function (a, b) {
            return b.value - a.value
          })
          if (data.other) {
            this.mapBp.isShow = true
            this.mapBp.others = data.other
          } else {
            this.mapBp.isShow = false
          }
          // data.other ? this.mapBp.others = data.other : this.mapBp.isShow = false
          // console.log(this.mapBp.others)
        } catch (err) {
          console.log(err);
          this.mapCustomer.isShow = false;
        }
        this.loading.bpCountry = false
      },
      async initBgChartBp(params = {}, isclick = '', needColor = []) {
        const _this = this
        try {
          let res = await this.axios.post('/overview/bgByBp.do', params)
          let data = res.data.data
          let bgbyloyaltyData = []
          let bgrbyloyaltyLegend = []
          let k = 0
          let colorStop = []
          for (const i in sortObj(data)) {
            if (isclick === 'bpBg') {
              colorStop = [
                {offset: 0, color: needColor[0].color},
                {offset: 1, color: needColor[1].color}
              ]
            } else {
              colorStop = [
                {offset: 0, color: _this.pieChartColor[k]},
                {offset: 1, color: _this.pieChartColor[k]}
              ]
            }
            bgbyloyaltyData.push({
              value: data[i],
              name: i,
              itemStyle: {
                normal: {
                  color: {
                    type: 'linear',
                    x: 0,
                    y: 0,
                    x2: 0,
                    y2: 1,
                    // colorStops: [
                    //   {offset: 0, color: _this.pieChartColor[k]},
                    //   {offset: 1, color: _this.pieChartColor[k + 1]}
                    // ],
                    colorStops: colorStop,
                    globalCoord: false // 缺省为 false
                  },
                  // barBorderRadius: [0, 50, 50, 0] //（顺时针左上，右上，右下，左下）
                },
                emphasis: {
                  shadowBlur: 10,
                  shadowOffsetX: 0,
                  shadowColor: 'rgba(0, 0, 0, 0.5)'
                }
              }
            })
            k += 2
            if (k > 8) {
              k = 0
            }
            bgrbyloyaltyLegend.push(i)
          }
          // let option = {
          //   tooltip: {
          //       confine: true,
          //     confine: true,
          //     trigger: 'item',
          //     axisPointer: {
          //       lineStyle: {
          //         color: '#f5f5f9'
          //       }
          //     },
          //     backgroundColor: 'rgba(255,255,255,1)',
          //     padding: [5, 10],
          //     textStyle: {
          //       color: '#7588E4',
          //     },
          //     extraCssText: 'box-shadow: 0 3px 12px rgba(224,226,233,1)'
          //   },
          //   legend: {
          //     orient: 'horizontal',
          //     bottom: 10,
          //     itemWidth: 10,
          //     itemGap: 5,
          //     textStyle: {
          //       padding: [0, 0, 0, 0],
          //       fontSize: 10
          //     },
          //     icon: 'circle',
          //     data: bgrbyloyaltyLegend
          //   },
          //   series: [
          //     {
          //       type: 'pie',
          //       radius: ['30%', '60%'],
          //       center: ['50%', '40%'],
          //       avoidLabelOverlap: false,
          //       label: {
          //         normal: {
          //           show: false,
          //           position: 'center'
          //         },
          //         emphasis: {
          //           show: true,
          //           textStyle: {
          //             fontSize: '10',
          //             fontWeight: 'bold'
          //           }
          //         }
          //       },
          //       labelLine: {
          //         normal: {
          //           show: false
          //         }
          //       },
          //       data: bgbyloyaltyData
          //     }
          //   ]
          // }
          let option = {
            grid: {
              top: 20,
              left: 60,
              bottom: 80
            },
            tooltip: {
                confine: true,
              trigger: 'axis',
              axisPointer: {
                type: 'shadow'
              },
              backgroundColor: 'rgba(255,255,255,1)',
              padding: [5, 10],
              textStyle: {
                color: '#7588E4'
              },
              extraCssText: 'box-shadow: 0 3px 12px rgba(224,226,233,1)'
            },
            xAxis: {
              type: 'category',
              axisLine: {
                lineStyle: {
                  color: '#f5f5f9'
                }
              },
              axisTick: {
                show: false
              },
              axisLabel: {
                rotate: 45,
                fontSize: 10,
                color: '#14142d'
              },
              data: bgrbyloyaltyLegend
            },
            yAxis: {
              type: 'value',
              axisLine: {
                lineStyle: {
                  color: '#f5f5f9'
                }
              },
              axisLabel: {
                fontSize: 10,
                color: '#959eaf'
              },
              axisTick: {
                show: false
              },
              splitLine: {
                lineStyle: {
                  color: ['#f5f5f9']
                }
              }
            },
            series: [{
              data: bgbyloyaltyData,
              type: 'bar',
              barMaxWidth: 10,
              itemStyle: {
                normal: {
                  color: {
                    type: 'linear',
                    x: 1,
                    y: 1,
                    x2: 1,
                    y2: 0,
                    colorStops: [{
                      offset: 0, color: '#0090e9' // 0% 处的颜色
                    }, {
                      offset: 1, color: '#0090e9' // 100% 处的颜色
                    }],
                    globalCoord: false // 缺省为 false
                  },
                  // barBorderRadius: [7, 7, 0, 0]
                }
              }
            }]
          }
          this.bpDomCharts.bgChart.setOption(option)
        } catch (err) {
          console.log(err);
          this.bpDomCharts.bgChart.showLoading('default', _this.errorInfo)
        }
        this.loading.bpBg = false
      },
      async initLoyaltyChartBp(params = {}, isclick = '', needColor = []) {
        const _this = this
        let pieChartColor = ['#506a91','#59c3e6', '#edaeda', '#93b8e3', '#a4e6ef']
        try {
          let res = await this.axios.post('/overview/loyaltyByBp.do', params)
          let data = res.data.data
          let customerbyloyaltyData = []
          let customerbyloyaltyLegend = []
          var k = 0
          let colorStop = []
          for (const i in sortObj(data)) {
            if (isclick === 'bpLoyalty') {
              colorStop = [
                {offset: 0, color: needColor[0].color},
                {offset: 1, color: needColor[1].color}
              ]
            } else {
              colorStop = [
                {offset: 0, color: pieChartColor[k]},
                {offset: 1, color: pieChartColor[k]}
              ]
            }
            if(i.toLowerCase() != 'lost') {
              customerbyloyaltyData.push({
                value: data[i],
                name: i,
                itemStyle: {
                  normal: {
                    color: {
                      type: 'linear',
                      x: 0,
                      y: 0,
                      x2: 0,
                      y2: 1,
                      // colorStops: [
                      //   {offset: 0, color: _this.pieChartColor[k]},
                      //   {offset: 1, color: _this.pieChartColor[k + 1]}
                      // ],
                      colorStops: colorStop,
                      globalCoord: false // 缺省为 false
                    },
                    barBorderRadius: [0, 50, 50, 0] //（顺时针左上，右上，右下，左下）
                  },
                  emphasis: {
                    shadowBlur: 10,
                    shadowOffsetX: 0,
                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                  }
                }
              })
              k += 1
              if (k > 4) {
                k = 0
              }
              customerbyloyaltyLegend.push(i)
            }
          }
          let option = {
            tooltip: {
                confine: true,
              trigger: 'item',
              axisPointer: {
                lineStyle: {
                  color: '#f5f5f9'
                }
              },
              backgroundColor: 'rgba(255,255,255,1)',
              padding: [5, 10],
              textStyle: {
                color: '#7588E4',
              },
              extraCssText: 'box-shadow: 0 3px 12px rgba(224,226,233,1)'
            },
            legend: {
              orient: 'horizontal',
              bottom: 10,
              itemWidth: 10,
              itemGap: 5,
              textStyle: {
                fontSize: 10
              },
              icon: 'circle',
              data: customerbyloyaltyLegend
            },
            series: [
              {
                type: 'pie',
                radius: ['30%', '60%'],
                center: ['50%', '40%'],
                avoidLabelOverlap: false,
                label: {
                  normal: {
                    show: false,
                    position: 'center'
                  },
                  emphasis: {
                    show: true,
                    textStyle: {
                      fontSize: '10',
                      fontWeight: 'bold'
                    }
                  }
                },
                labelLine: {
                  normal: {
                    show: false
                  }
                },
                data: customerbyloyaltyData
              }
            ]
          }
          this.bpDomCharts.loyaltyChart.setOption(option)
        } catch (err) {
          console.log(err);
          this.bpDomCharts.loyaltyChart.showLoading('default', _this.errorInfo)
        }
        this.loading.bpLoyalty = false
      },
      countryChartsBpClick(item) { // 第二个country图表的点击
        this.postParamsBp.geo = ''
        this.postParamsBp.region = ''
        const params = {
          geo: [this.postParamsBp.geo],
          region: [this.postParamsBp.region],
          country: [item.name],
          bg: '',
          loyalty: '',
          industry: '',
          segment: ''
        }
        this.loadBpCharts(params)
      },
      countryChartsBpClickOther() {
        this.countryPageNumBp++
        const params = {
          geo: [this.postParamsBp.geo],
          region: [this.postParamsBp.region],
          country: '',
          bg: '',
          loyalty: '',
          industry: '',
          segment: '',
          pageNum: this.countryPageNumBp
        }
        this.loading.bpCountry = true
        this.initCountryChartBp(params)
      },
      loadCustomerCharts(params, isclick = "", needColor = []) {
        this.initCountryPageNum()
        this.initLoading() // 初始化，显示所有的loading效果
        this.initCommericalCustomer(params)
        this.initCustomerFisYear(params)
        this.initTrendChart(params)
        this.initGeoChart(params)
        this.initRegionChart(params)
        this.initCountryChart(params)
        // this.initBgChart(params, isclick, needColor)
        this.initSegmentChart(params, isclick, needColor)
        this.initLoyaltyChart(params, isclick, needColor)
        this.initIndustryChart(params)
      },
      loadBpCharts(params, isclick = "", needColor = []) {
        this.initCountryPageNum()
        this.initBpLoading() // 初始化，显示所有的loading效果
        this.initCommericalBp(params)
        this.initBpFisYear(params)
        this.initTrendChartBp(params)
        this.initGeoChartBp(params)
        this.initRegionChartBp(params)
        this.initCountryChartBp(params)
        // this.initBgChartBp(params, isclick, needColor)
        this.initLoyaltyChartBp(params, isclick, needColor)
      },
      chartsResize() {
        const _this = this
        setTimeout(function () {
          _this.customerDomCharts.trendChart.resize()
          _this.customerDomCharts.geoChart.resize()
          _this.customerDomCharts.regionChart.resize()
          // _this.customerDomCharts.bgChart.resize()
          _this.customerDomCharts.loyaltyChart.resize()
          _this.customerDomCharts.industryChart.resize()
          _this.customerDomCharts.segmentChart.resize()
          _this.bpDomCharts.trendChart.resize()
          _this.bpDomCharts.geoChart.resize()
          _this.bpDomCharts.regionChart.resize()
          // _this.bpDomCharts.bgChart.resize()
          _this.bpDomCharts.loyaltyChart.resize()
        }, 200)
      },
      comdify(number) {
        let n = number.toString()
        var re = /\d{1,3}(?=(\d{3})+$)/g;
        var n1 = n.replace(/^(\d+)((\.\d+)?)$/, function (s, s1, s2) {
          return s1.replace(re, "$&,") + s2
        })
        return n1
      },
      initLoading() {
        this.loading = {
          customer: true,
          geo: true,
          region: true,
          country: true,
          bg: true,
          loyalty: true,
          industry: true,
          segment: true
        }
      },
      initBpLoading() {
        this.loading = {
          bpCustomer: true,
          bpGeo: true,
          bpRegion: true,
          bpCountry: true,
          bpBg: true,
          bpLoyalty: true
        }
      }
    },
    mounted() {
      const _this = this
      this.initLoading()
      this.initBpLoading()
      this.initEchartsDom()
      this.loadCustomerCharts()
      this.loadBpCharts()
      this.customerDomCharts.geoChart.on('click', function (data) { // 点击geo
        _this.postParams.region = ''
        _this.postParams.country = ''
        _this.postParams.geo = data.name
        const params = {
          geo: [_this.postParams.geo],
          region: [_this.postParams.region],
          country: [_this.postParams.country],
          bg: '',
          loyalty: '',
          industry: '',
          segment: ''
        }
        _this.loadCustomerCharts(params)
      })
      this.customerDomCharts.regionChart.on('click', function (data) {
        _this.postParams.geo = ''
        _this.postParams.country = ''
        _this.postParams.region = data.name
        const params = {
          geo: [_this.postParams.geo],
          region: [_this.postParams.region],
          country: [_this.postParams.country],
          bg: '',
          loyalty: '',
          industry: '',
          segment: ''
        }
        _this.loadCustomerCharts(params)
      })
      // this.customerDomCharts.bgChart.on('click', function (data) {
      //   _this.postParams.bg = data.name
      //   const params = {
      //     // geo: [_this.postParams.geo],
      //     // region: [_this.postParams.region],
      //     // country: [_this.postParams.country],
      //     geo: [],
      //     region: [],
      //     country: [],
      //     bg: _this.postParams.bg,
      //     loyalty: '',
      //     industry: '',
      //     segment: ''
      //   }
      //   _this.loadCustomerCharts(params, "bg", data.color.colorStops)
      // })
      this.customerDomCharts.loyaltyChart.on('click', function (data) { // 点击loyalty图表
        _this.postParams.loyalty = data.name
        const params = {
          // geo: [_this.postParams.geo],
          // region: [_this.postParams.region],
          // country: [_this.postParams.country],
          geo: [],
          region: [],
          country: [],
          bg: '',
          loyalty: _this.postParams.loyalty,
          industry: '',
          segment: ''
        }
        _this.loadCustomerCharts(params, "loyalty", data.color.colorStops)
      })
      this.customerDomCharts.industryChart.on('click', function (data) { // 点击industry图表
        _this.postParams.industry = data.name
        if (_this.postParams.industry === 'other') return
        const params = {
          // geo: [_this.postParams.geo],
          // region: [_this.postParams.region],
          // country: [_this.postParams.country],
          geo: [],
          region: [],
          country: [],
          bg: '',
          loyalty: '',
          industry: _this.postParams.industry,
          segment: ''
        }
        _this.loadCustomerCharts(params)
      })
      this.customerDomCharts.segmentChart.on('click', function (data) { // 点击segment
        _this.postParams.segment = data.name
        if (_this.postParams.segment === 'other') return
        const params = {
          // geo: [_this.postParams.geo],
          // region: [_this.postParams.region],
          // country: [_this.postParams.country],
          geo: [],
          region: [],
          country: [],
          bg: '',
          loyalty: '',
          industry: '',
          segment: _this.postParams.segment
        }
        _this.loadCustomerCharts(params, "segment", data.color.colorStops)
      })
      this.bpDomCharts.geoChart.on('click', function (data) { // 点击第二个geo图表
        _this.postParamsBp.region = ''
        _this.postParamsBp.country = ''
        _this.postParamsBp.geo = data.name
        const params = {
          geo: [_this.postParamsBp.geo],
          region: [_this.postParamsBp.region],
          country: [_this.postParamsBp.country],
          bg: '',
          loyalty: '',
          industry: '',
          segment: ''
        }
        _this.loadBpCharts(params)
      })
      this.bpDomCharts.regionChart.on('click', function (data) { // 第二个region图表
        _this.postParamsBp.geo = ''
        _this.postParamsBp.country = ''
        _this.postParamsBp.region = data.name
        const params = {
          geo: [_this.postParamsBp.geo],
          region: [_this.postParamsBp.region],
          country: [_this.postParamsBp.country],
          bg: '',
          loyalty: '',
          industry: '',
          segment: ''
        }
        _this.loadBpCharts(params)
      })
      // this.bpDomCharts.bgChart.on('click', function (data) { // 第二个bg图表的点击
      //   _this.postParamsBp.bg = data.name
      //   const params = {
      //     // geo: [_this.postParamsBp.geo],
      //     // region: [_this.postParamsBp.region],
      //     // country: [_this.postParamsBp.country],
      //     geo: [],
      //     region: [],
      //     country: [],
      //     bg: _this.postParamsBp.bg,
      //     loyalty: '',
      //     industry: '',
      //     segment: ''
      //   }
      //   _this.loadBpCharts(params, 'bpBg', data.color.colorStops)
      // })
      this.bpDomCharts.loyaltyChart.on('click', function (data) {
        _this.postParamsBp.loyalty = data.name
        const params = {
          // geo: [_this.postParamsBp.geo],
          // region: [_this.postParamsBp.region],
          // country: [_this.postParamsBp.country],
          geo: [],
          region: [],
          country: [],
          bg: '',
          loyalty: _this.postParamsBp.loyalty,
          industry: '',
          segment: ''
        }
        _this.loadBpCharts(params, 'bpLoyalty', data.color.colorStops)
      })
      window.onresize = function () {
        _this.chartsResize()
      }
    },
    watch: {
      'sidebar.opened': function () {
        this.chartsResize()
      }
    },
    filters: {
      filterCountry(country) {
        if (country === 'United Kingdom') {
          return 'UK'
        } else if (country === 'United States') {
          return 'US'
        } else {
          return country
        }
      }
    }
  }
</script>

<style scoped lang="scss">
  .new-overview {
    user-select: none;
    padding: 20px 46px 0 46px;
    overflow: hidden;
  }

  .reset {
    width: 40px;
    height: 40px;
    position: fixed;
    top: 55px;
    right: 5px;
    z-index: 10;
    /*background: linear-gradient(to bottom right, #8928f5, #2853f1);*/
    background: #0090e0;
    cursor: pointer;
    text-align: center;
    border-radius: 24px;
    box-shadow: 0 3px 12px #e0e2e9;
    i {
      line-height: 40px;
      font-size: 20px;
      color: #fff;
    }
  }

  .num-charts {
    .customer-all {
      font-family: 'Helvetica Neue';
      border-radius: 6px;
      width: 100%;
      height: 38vh;
      box-shadow: 0 3px 12px #e0e2e9;
      padding: 3vh 30px;
      background: url("images/customer_bg.png") no-repeat;
      background-size: cover;
      overflow: hidden;
      position: relative;
      .customer-all-title {
        text-align: center;
        font-size: 3.5vh;
        color: #fdcf65;
        font-weight: bold;
        margin-top: 0.3vh;
        /*font-family: 'MicrosoftYaHei-Bold';*/
      }
      .customer-time{
        margin-top:22px;
      }
      .customer-num {
        text-align: center;
        font-size: 4vh;
        font-weight: bold;
        margin: 2.5vh 0 1.2vh 0;
        color: #fff;
      }
      .customer-time {
        text-align: center;
        color: #fdce65;
        font-size: 2vh;
        font-family: 'MocrosoftYaHei';
      }
      .customer-all-repository {
        margin-top: 1vh;
        /*display: flex;*/
        position: relative;
        justify-content: center;
        & > div {
          position: absolute;
          right: 10vh;
          /*float: left;*/
          /*background: red;*/
          display: inline-block;
          /*margin-left: 0.5vh;*/
          padding: 5px;
          /*border: 2px solid #fff;*/
          /*width: 32%;*/
          height: 10vh;
          &:first-child {
            left: 10vh;
            /*margin-left: 2vw;*/
            /*margin-right: 7vw;*/
          }
          span.year {
            font: 2.5vh bold;
            color: #fff;
            display:block;
          }
          span.number{
            font: 3.5vh bold;
            color: #fff;
            display:block;
            margin-top:1vh;
            /*text-align: center;*/
          }

        }
        /*bottom: 8vh;*/
        /*div.accumulated-number-title {*/
          /*font-size: 14px;*/
          /*color: #333;*/
          /*font-family: 'MicrosoftYaHei';*/
          /*margin-top: 3vh;*/
          /*margin-bottom:2vh;*/
        /*}*/
        /*span.year {*/
          /*display: inline-block;*/
          /*margin-top: 0vh;*/
          /*font-size: 14px;*/
          /*font-family: 'MicrosoftYaHei';*/
          /*!*font-weight: bold;*!*/
          /*color: #333;*/
        /*}*/
        /*span.number {*/
          /*vertical-align: middle;*/
          /*display: inline-block;*/
          /*font-family: 'MicrosoftYaHei-Bold';*/
          /*margin-top: 0vh;*/
          /*font-size: 36px !important;*/
          /*font-weight: bold;*/
          /*color: #fff;*/
        /*}*/
      }
      .customer-all-num {
        top: 12vh
      }
      .shareNumber {
        position: relative;
        color: #fff;
        text-align: center;
        margin-top: 1vh;
        span {
          position: absolute;
          left: 10.6vh;
          bottom: -15vh;
        }
      }
    }
    .cell {
      background: #fff;
      box-shadow: 0 3px 12px #e0e2e9;
      border-radius: 6px;
      .trend-chart-title {
        width: 100%;
        height: 5vh;
        padding-top: 20px;
        padding-left: 30px;
        font-size: 16px;
        font-weight: bold;
        color: #333;
        font-family: 'MocrosoftYaHei';
      }
      .trend-chart {
        width: 100%;
        height: 33vh;
      }
    }
  }

  .map-charts {
    margin-top: 20px;
    box-shadow: 0 3px 12px #e0e2e9;
    border-radius: 6px;
    background: #fff;
    overflow: hidden;
    .cell {
      background: #fff;
      .map-chart-title {
        width: 100%;
        height: 5vh;
        padding-top: 10px;
        padding-bottom: 20px;
        padding-left: 20px;
        font-size: 16px;
        font-weight: bold;
        color: #333;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        font-family: 'MicrosoftYaHei-Bold';
      }
      .hide {
        width: 100%;
        height: 30vh;
        overflow: auto;
        overflow: hidden;
        .region-chart {
          width: 100%;
          height: 30vh;
        }
      }
      .geo-chart, .country-chart {
        width: 100%;
        height: 30vh;
        overflow: hidden;
      }
      .country-item {
        display: flex;
        width: 48%;
        height: 6vh;
        float: left;
        padding-left: 20px;
        margin: 5px 0 0 0px;
        overflow: hidden;
        cursor: pointer;
        .country-item-index {
          flex: 1;
          /*text-align: center;*/
          .country_first_index {
            background: #ffc850;
          }
          .country_second_index {
            background: #ff9580;
          }
          .country_third_index {
            background: #ff94d8;
          }
          span {
            display: inline-block;
            width: 3vh;
            height: 3vh;
            border-radius: 50%;
            text-align: center;
            line-height: 3vh;
            margin-top: 1.5vh;
            color: #fff;
            background: #cbcbcb;
          }
        }
        .country-item-img {
          flex: 1;
          img {
            display: inline-block;
            width: 5vh;
            height: 5vh;
            margin-top: 0.5vh;
            margin-left: -5px;
          }
        }
        .country-item-value {
          flex: 3;
          .country-item-name {
            line-height: 3vh;
            height: 3vh;
            font-size: 14px;
            color: #939cad;
            overflow: hidden;
            text-overflow: ellipsis;
          }
          .country-item-num {
            line-height: 3vh;
            height: 3vh;
            font-size: 14px;
            color: #14142d;
          }
        }
      }
    }
  }

  .detailed-charts {
    margin-top: 20px;
    .cell {
      background: #fff;
      box-shadow: 0 3px 12px #e0e2e9;
      border-radius: 6px;
      .detailed-chart-title {
        width: 100%;
        height: 5vh;
        margin-left: 20px;
        /*text-align: center;*/
        padding-top: 11px;
        padding-bottom: 20px;
       /* padding-left: 30px;*/
        font-size: 16px;
        font-weight: bold;
        color: #333;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        font-family: 'MicrosoftYaHei-Bold';
      }
      .bg-chart, .loyalty-chart, .industry-chart, .segment-chart {
        width: 100%;
        height: 30vh;
      }
    }
  }

  .bp {
    margin-top: 20px;
    margin-bottom: 40px;
    .bp-all {
      background: url("images/bp_bg.png") no-repeat;
      background-size: cover;
      box-shadow: 0 3px 12px #e0e2e9;
      position: relative;
      .customer-time {
        /*color: #333;*/
        font-size:14px;
        font-family: 'MocrosoftYaHei';
      }
      .customer-all-title {
        font-size: 3.5vh;
        /*color: #202071;*/
        font-weight: bold;
      }
      .customer-all-repository {
        /*position: absolute;*/
        /*bottom: 8vh;*/
        div.accumulated-number-title {
          font-size: 14px;
          color: #333;
          font-family: 'MicrosoftYaHei';
          margin-top: 3vh;
        }
        span.year {
          display: inline-block;
          margin-top: 0vh;
          font-size: 14px;
          font-family: 'MicrosoftYaHei';
          /*font-weight: bold;*/
          color: #333;
        }
        span.number {
          vertical-align: middle;
          display: inline-block;
          font-family: 'MicrosoftYaHei-Bold';
          margin-top: 0;
          /*font-size: 36px !important;*/
          font-weight: bold;
          color: #fff;
        }
      }
    }
  }
</style>
